<template>
  <view class="router-view bcl-active" v-show="awaitStatus">
    <view class="container bcl-white border border-bottom">
      <uni-progress-bar
        :current-index="1"
        :progress-data="progressData"
      ></uni-progress-bar>
    </view>

    <view class="user-form bcl-white mt-15 mb-15">
      <view
        class="box box-between box-column-center pl-15 pr-15 border border-bottom"
      >
        <view class="bold">店铺名称</view>
        <view class="uni-input text-right bcl-white">
          <input
            type="text"
            placeholder="输入您的店铺名称"
            v-model="shopInfo.name"
          />
        </view>
      </view>

      <view class="box box-between box-column-center pl-15 pr-15">
        <view class="bold">店铺地址</view>
        <view class="uni-input box-1 p-10 bcl-white">
          <!-- <input type="text" placeholder="输入您的店铺地址" v-model="shopInfo.address" /> -->
          <!-- <picker mode="region" class="width" @change="changeArea">
						 <view class="height text-right">
							<text v-if="shopInfo.address.length">{{shopInfo.address[0]}}{{shopInfo.address[1]}}{{shopInfo.address[2]}}</text>
							<text v-else>请选择地址</text>
						 </view>
					</picker> -->
          <picker
            mode="multiSelector"
            range-key="label"
            :value="addressIndex"
            :range="[provinceData, cityData[provinceIndex]]"
            @columnchange="changeProvince"
            @change="changeAddress"
          >
            <view class="input text-right"
              >{{ shopInfo.address[0] }}/{{ shopInfo.address[1] }}</view
            >
          </picker>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="shop-intro">
        <view class="bold">店铺介绍</view>
        <view class="border bcl-white radius shadow mt-15">
          <textarea
            cols="30"
            rows="10"
            placeholder="专业工程造价工程设计，要的联系我哦~"
            v-model="shopInfo.intro"
          ></textarea>
        </view>
      </view>

      <view class="shop-intro mt-30 pb-50">
        <!--  店铺标签 -->
        <view class="box box-between box-column-center">
          <view class="添加技能标签，让更多人找到你，最多设置3个标签"
            >店铺标签</view
          >
          <view class="fz-12 cl-second"
            >添加技能标签，让更多人找到你，最多设置3个标签</view
          >
        </view>
        <view class="mt-15">
          <!-- 列表 -->
          <view class="uni-label-list mt-20">
            <view
              class="uni-label pointer"
              v-for="(item, index) in skill.hot"
              :key="index"
              :class="{
                'uni-label-selected': shopInfo.tagGroup.includes(item.cate_id),
              }"
              @tap="chooseTag(item)"
            >
              <view class="hide-text-2">{{ item.tag_name }}</view>
            </view>
          </view>
        </view>

        <!--  店铺封面 -->
        <view class="fz-15 bold mt-15">
          <view
            class="container box border shadow box-column-center mb-15 bcl-white radius cover"
          >
            <view
              class="up-img box box-column-center box-center"
              @tap="uploadCover"
            >
              <image :src="shopInfo.cover" mode="widthFix" />
              <image
                src="/static/images/camera_icon.png"
                class="camera"
                mode="widthFix"
              />
            </view>
            <view>上传店铺封面</view>
          </view>
        </view>

        <!-- 注意事项 -->
        <view class="tips mt-30">
          <view class="mb-10 bold">注意事项</view>
          <view class="tips-content cl-basic">
            <view>1.封面是店铺展示方式的重要入口；</view>
            <view>2.优秀的作品封面更能吸引客户关注；</view>
            <view
              >3.尺寸必须为450*450像素,大小不超过3M，请保持图片清晰,能够体现卖点；</view
            >
          </view>
        </view>
      </view>

      <view
        class="uni-footer bcl-main-new cl-white text-center pointer pointer-filter"
        @tap="submitShopInfo"
        >确认提交</view
      >
    </view>
  </view>
</template>

<script>
import { chooseImage } from "@/utils/choose";
import {
  createStore,
  skillList,
  myShop,
  editShop,
  realnameAuthStatus,
} from "@/apis/user";
import uniProgressBar from "@/components/progressBar";
import { provinceData, cityData } from "@/utils/area";

export default {
  components: {
    uniProgressBar,
  },

  data() {
    return {
      progressData: ["实名认证", "店铺设置", "发布商品"],
      shopInfo: {
        name: "", // 店铺名
        address: ["北京市", "市辖区"], // 店铺地址
        intro: "", // 简介
        tagGroup: [], // 已选的店铺标签
        cover: "", // 店铺封面
      },
      skill: [],
      provinceData,
      cityData,
      provinceIndex: 0,
      cityIndex: 0,
      addressIndex: [0, 0],
      awaitStatus: false,
    };
  },

  onLoad() {
    this.getSkillList();

    this.checkAuthStatus();
  },

  methods: {
    /**
     * 选择标签
     */
    chooseTag(item) {
      // 添加或删除
      let index = this.shopInfo.tagGroup.indexOf(item.cate_id);
      if (index > -1) this.shopInfo.tagGroup.splice(index, 1);
      else if (this.shopInfo.tagGroup.length < 3)
        this.shopInfo.tagGroup.push(item.cate_id);
    },

    /**
     * 上传店铺封面
     */
    async uploadCover() {
      let data = await chooseImage(1);
      this.shopInfo.cover = data[0].url;
    },

    /**
     * 提交店铺信息
     */
    async submitShopInfo() {
      if (
        !this.shopInfo.name ||
        !this.shopInfo.address.length ||
        !this.shopInfo.intro ||
        !this.shopInfo.cover ||
        !this.shopInfo.tagGroup
      )
        return this.$toast("请设置完整店铺信息");
      let params = {
        shop_pic: this.shopInfo.cover,
        shop_name: this.shopInfo.name,
        shop_desc: this.shopInfo.intro,
        province: this.shopInfo.address[0],
        city: this.shopInfo.address[1],
        tags: this.shopInfo.tagGroup.join(","),
      };

      if (this.shopInfo.id) Object.assign(params, { id: this.shopInfo.id });
      let saveShop = this.shopInfo.id ? editShop : createStore;

      let { code, data } = await saveShop(params);
      if (code === 200) this.$toast("保存成功");
    },

    changeArea(event) {
      this.shopInfo.address = event.detail.value;
    },

    // 获取标签列表
    async getSkillList() {
      let { code, data } = await skillList();
      if (code === 200) {
        this.skill = data;
      }
    },

    /**
     * 获取店铺设置资料
     */
    async getMyShopInfo() {
      let { code, data } = await myShop();
      if (code === 200) {
        let tagGroup = data.shop_info.cate_name.map((item) => item.cate_id);
        this.shopInfo = {
          name: data.shop_info.shop_name,
          intro: data.shop_info.shop_desc,
          cover: data.shop_info.shop_pic,
          address: [data.shop_info.city_name, "", ""],
          tagGroup,
          id: data.shop_info.id,
        };
      }
    },

    /**
     * 检查实名认证状态
     */
    async checkAuthStatus() {
      try {
        let { code, data } = await realnameAuthStatus();
        if (code === 200) {
          if (data.status !== 1) {
            this.$toast("请先进行实名认证");
            setTimeout(() => {
              uni.redirectTo({
                url: "/user/setting/binding/name",
              });
            }, 1000);
          } else {
            this.getMyShopInfo();
          }
        }
        this.awaitStatus = true;
      } catch (_) {
        this.awaitStatus = true;
      }
    },

    /**
     * 切换省级
     */
    changeProvince(event) {
      let { column, value } = event.detail;
      if (column === 0) {
        this.provinceIndex = value;
      } else {
        this.cityIndex = value;
      }
    },

    changeAddress(event) {
      this.addressIndex = event.detail.value;
      this.shopInfo.address[0] = this.provinceData[this.provinceIndex].label;
      this.shopInfo.address[1] = this.cityData[this.provinceIndex][
        this.cityIndex
      ].label;
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .uni-input {
    margin-bottom: 0;
    border: none;
  }

  .cover {
    .up-img {
      width: 210upx;
      height: 140upx;
      margin-right: 20px;
      background-size: contain;

      .camera {
        position: absolute;
        width: 90upx;
        opacity: 0.8;
      }

      image {
        max-height: 140upx;
      }
    }
  }
  .uni-label-list {
    max-height: 600upx;
    overflow-y: scroll;

    .uni-label {
      overflow-y: scroll;
    }
  }
}
</style>
